<template>
  <div class="system-bg">
    <el-card class="system-card" shadow="hover">
      <div slot="header" class="clearfix card-header">
        <span>系统设置</span>
      </div>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-card class="feature-card" shadow="hover" @click.native="goToUser">
            <div class="feature-content">
              <i class="el-icon-user-solid feature-icon"></i>
              <h3>用户管理</h3>
              <p>管理系统用户，设置用户角色和权限</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="feature-card" shadow="hover" @click.native="goToRole">
            <div class="feature-content">
              <i class="el-icon-s-check feature-icon"></i>
              <h3>角色管理</h3>
              <p>管理用户角色，设置角色菜单权限</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="feature-card" shadow="hover" @click.native="goToMenu">
            <div class="feature-content">
              <i class="el-icon-menu feature-icon"></i>
              <h3>菜单管理</h3>
              <p>管理系统菜单，配置菜单层级和权限</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SystemManage',
  methods: {
    goToUser() {
      this.$router.push('/system/user');
    },
    goToRole() {
      this.$router.push('/system/role');
    },
    goToMenu() {
      this.$router.push('/system/menu');
    }
  }
};
</script>

<style scoped>
.system-bg {
  min-height: 80vh;
  background: linear-gradient(135deg, #f4f6fa 60%, #e0e7ff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 0;
  animation: fadeIn 0.8s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px);}
  to { opacity: 1; transform: none;}
}
.system-card {
  width: 1100px;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  background: rgba(255,255,255,0.95);
  transition: box-shadow 0.3s;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.feature-card {
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.3s ease;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(108,99,255,0.08);
  background: #fff;
  margin-bottom: 18px;
}
.feature-card:hover {
  transform: scale(1.04) translateY(-5px);
  box-shadow: 0 8px 25px rgba(108,99,255,0.13);
}
.feature-content {
  text-align: center;
  padding: 20px;
}
.feature-icon {
  font-size: 48px;
  color: #6a82fb;
  margin-bottom: 15px;
}
.feature-content h3 {
  margin: 10px 0 6px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}
.feature-content p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}
</style> 